export default {
  name: 'Users',
  data () {
    return {
      users: [],
      info: {
        query: '',
        pagenum: 1,
        pagesize: 6
      },
      total: 0,
      // 添加用户 dialog 是否显示
      addUserDialog: false,
      // 添加用户相关信息
      addUserInfo: {},
      // 添加用户表单验证
      addUserRules: {
        username: [
          { required: true, message: '请输入正确的用户名', trigger: 'change' },
          { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入正确的密码', trigger: 'change' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'change' }
        ]
      },
      editUserDialog: false,
      // 编辑用户的相关信息
      editUserInfo: {
        email: '',
        mobile: '',
        id: 0
      },
      // 分配权限是否显示
      rightsDialog: false,
      rightsInfo: {
        username: '',
        id: 0,
        rights: ''
      },
      // 权限列表
      rightsList: []
    }
  },
  created () {
    this.getUsersList()
  },
  methods: {
    async getUsersList () {
      const { data } = await this.$get('users', { params: this.info })
      this.total = data.total
      this.users = data.users
    },
    // 添加用户逻辑
    addUserHandler () {
      this.$refs.addUser.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则填写表单'
          })
          return
        }
        // 发送请求
        const { meta } = await this.$post('/users', this.addUserInfo)
        // 判断成功还是失败
        if (meta.status === 400) {
          this.$message({
            type: 'warning',
            message: meta.msg
          })
          return
        }
        this.$message({
          type: 'success',
          message: '添加用户成功'
        })
        // 关闭添加用户对话框
        this.addUserDialog = false
        // 重新请求数据
        this.getUsersList()
      })
    },
    async deleteUserHandler (id) {
      const { meta } = await this.$http.delete(`users/${id}`)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg,
          duration: 1500
        })
        this.getUsersList()
      }
    },
    async showEditUserDialogHandler (id) {
      const { data } = await this.$get('users/' + id)
      // 拿到的信息进行填充
      this.editUserInfo.id = data.id
      this.editUserInfo.username = data.username
      this.editUserInfo.mobile = data.mobile
      this.editUserInfo.email = data.enail

      // 显示对话框
      this.editUserDialog = true
    },
    async editUserHandler () {
      const { meta } = await this.$put('users/' + this.editUserInfo.id, this.editUserInfo)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '编辑用户信息成功'
        })
        this.getUsersList()
        this.editUserDialog = false
      }
    },
    // 展示分配权限对话框
    async showRightsHandler (val) {
      // 展开的时候把值附上去
      this.rightsInfo.username = val.username
      this.rightsInfo.id = val.id
      // 发送请求, 请求身份列表
      const { data } = await this.$get('roles')
      this.rightsList = data
      this.rightsDialog = true
    },
    // 确认权限分配
    async editRightHandler () {
      const { meta } = await this.$put(`users/${this.rightsInfo.id}/role`, { rid: this.rightsInfo.rights })
      // 判断设置成功
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '设置用户角色成功'
        })
        // 刷新数据
        this.getUsersList()
        // 关闭分配权限对话框
        this.rightsDialog = false
      }
    }
  },
  watch: {
    info: {
      handler () {
        this.getUsersList()
      },
      deep: true
    }
  },
  filters: {
    format (val) {
      // 把时间戳换成时间对象
      const t = new Date(val * 1000)

      // 获取时间对象内的信息
      const year = t.getFullYear()
      const month = t.getMonth() + 1
      const date = t.getDate()

      return `${year} 年 ${month} 月 ${date} 日`
    }
  }
}
